<template>
	<view>
		<view class="cont-message cont-back">
			<view class="img-video">师生评价（{{leaveword.length}}）</view>
			<!-- 分类 -->
			<view class="menu-block">
				<block v-for="(item,index) in newmessage" :key="index">
					<view
						:class="{ activetext: index == num }"
						@click="menubtn(index, item)">
						{{ item }}
					</view>
				</block>
            </view>
				<!-- 评价 -->
				<block
					v-for="(item, index) in leaveword"
					:key="index">
					<view class="message-dist">
						<view class="users-message">
							<view class="cont-name">
								<image
									:src="item.avatarUrl"
									mode="widthFix"></image>
								<text>{{ item.nickName }}</text>
							</view>
							<!-- 时间 -->
							<view class="message-time">
								<!-- substr就是截取那个时间从哪里到哪里，去掉后面的时分秒等 -->
								{{ item.time.substr(0,10) }}
							</view>
						</view>
						<view class="cont-name-text">
							<text>{{ item.usermess }}</text>
						</view>
					</view>
				</block>
			</view>
		<!-- 评论按钮 -->
		<view
			class="evaluation"
			@click="popup()">
			<input
				type="text"
				placeholder="我来说两句"
				disabled="disabled" />
		</view>
		<!-- 评论框 -->
		<view
			class="Comment-box"
			v-if="box" :catchtouchmove="true">
			<view class="Comment-text">
				<textarea
					placeholder="写下你对这篇游记的评价"
					show-confirm-bar="false"
					focus="true" v-model="Comment"></textarea>
					<!-- show-confirm-bar是否在键盘上弹出完成按钮，不会看uniapp文档去 -->
			</view>
			<!-- 发表按钮 -->
			<view class="published">
				<view @click="messcancel()">取消</view>
				<view @click="bTn()">发表</view>
			</view>
		</view>
		<!-- 登录模态框-->
		<motal ref="mon"></motal>
		<!-- 及时反馈文件 ref相当于传统开发的组件id,就是表示不同 -->
		<HMmessages
			ref="HMmessages"
			@complete="HMmessages = $refs.HMmessages"
			@clickMessage="clickMessage"></HMmessages>
	</view>
</template>

<script>
	//定义操作数据库
	var db=wx.cloud.database()
	var users=db.collection('user')
	//引入登录模态框
	import motal from '../../../element/modal.vue'
	//引入及时反馈的提示
	import HMmessages from '@/components/HM-messages/HM-messages.vue'
	//引入当前时间的js
	var util=require('../../../common/util.js');
	var time=util.formatTime(new Date());
	
	export default {
		name: 'messages',
		props:{
			leaveword:Array,
			messageword:Array,
			detaid:String
		},
		components:{
			motal,
			HMmessages
		},
		data() {
			return {
				num: 0,
				box: false,
				//取到要提交到数据库的数据
				avatarUrl:'',//头像
				nickName:'',//昵称
				Comment:'',//留言
				newmessage:[],//拼接的留言分类标签
				ids:''
			}
		},
		methods: {
			menubtn(index, item) {
				this.num = index
				console.log(item)
				this.$parent.fatherMethod(item)
				
			},
			//显示评论框
			popup() {
				//评价之前要让用户登录才能评价
				users.get()
				.then((res)=>{
					console.log(res)
					//数据库里有数据表示该用户已经登录
					if(res.data.length==0){
						let message='请登录后再操作'
						this.$nextTick(()=>{
							// this.$refs.mon.init()
							this.$refs.mon.init(message)
						})
					}else{
						console.log('已经登录')
						//取到用户昵称头像，暂存起来 console.log(res)
						let usermen=res.data[0]
						this.avatarUrl=usermen.avatarUrl
						this.nickName=usermen.nickName
						this.box = true
					}
				})
				.catch((err)=>{
					console.log('登录错误')
				})
			},
			//发表评论
			bTn(){
				if(this.Comment==""){
					console.log('空的')
					let tip='评论不能为空'
					let icon='error'
					this.tips(tip,icon)
				}else{
					//调用云函数
					//1.首先提交评价到百度AI分析处理，返回标签之后，再提交到数据库
					this.submit()
					 
				}
			},
			//提交数据到数据库
			async submit(){
				//首先提交评价到百度分析出合理返回标签
				let stamess=await this.aiMessage()
				console.log(stamess)
				if(stamess.length === 0){
					//返回空的也提交到数据库
					let classif=''
					await this.messdata(classif)
				}else{
					//百度AI处理后返回标签不为空，返回多个标签取数组最后一个标签提交到数据库
					console.log(stamess[stamess.length-1])
					let ali=stamess[stamess.length-1]
					//es6数组解构，可以交换变量值。可以合起来写，没必要分开单独写
					let [prop,adj]=[ali.prop,ali.adj]
					console.log(prop+adj)
					let classif=prop+adj
					await this.messdata(classif)
				}
			},
			//首先提交评价到百度分析出合理返回标签
			aiMessage(){
				return new Promise((resolve,reject)=>{
					wx.cloud.callFunction({
						name:'aimessage',
						data:{
							message:this.Comment
						}
					})
					.then((res)=>{
						console.log(res)
						//这里是拿到了百度sdk后的数据，后返回的数组，我在这里报错过，应该是云函数的问题，记得去打断点去调试
						let aidata=res.result.aimessage.items
						resolve(aidata)
					})
					.catch((err)=>{
						console.log(err)
						reject('出错')
					})
				})
			},
			//把所有数据提交到数据库
			messdata(classif){
				return new Promise((resolve,reject)=>{
					//把所有要提交的数据以对象的形式提交
					var messarray = {
						usermess:this.Comment, //评价内容
						time:time,//提交的时间
						avatarUrl:this.avatarUrl,//头像 
						nickName:this.nickName //昵称
					}
					let mess=db.collection('message')
					mess.add({
						data:{
							id:this.ids,
							classmessage:classif,
						    messagedata:messarray
						}
					})
					.then((res)=>{
						console.log(res)
					//留言成功，给予反馈
					let tip='评论成功'
					let icon='success'
					this.tips(tip,icon)
					// 留言成功，清空输入框
					this.Comment=''
					//留言成功刷新留言数据，用户实时看到，就要执行父组件的方法
					let item='全部'
					this.$parent.fatherMethod(item)
					})
					.catch((err)=>{
						console.log(err)
					})
				})
			},
			//及时反馈组件
			tips(tip,icon){
				//登录成功
				this.HMmessages.show(tip, {
					icon:icon,
					iconColor: '#ffffff',
					fontColor: '#ffffff',
					background: 'rgba(102, 0, 51, 0.6)'
				})
			},
			
			//隐藏评论框
			messcancel() {
				this.box = false
				//留言成功清空输入框
				this.Comment=''
				//留言成功刷新留言数据，用户实时看到，就要执行父组件的方法
				this.$parent.fatherMethod(name)
			}
		},
		watch:{
			messageword(newvalue,oldvalue){
				console.log(newvalue)
				this.newmessage=['全部',...newvalue]
				this.num=0
				console.log(this.newmessage)
			},
			//取到id值，上传到数据库的
			detaid(newvalue,oldvalue){
				console.log(newvalue)
			    this.ids=newvalue
			}
		}
	}
</script>

<style scoped>
	.cont-message {
		margin-top: 20upx;
		margin-bottom: 80upx;
	}
	.cont-back {
		padding: 20upx;
		background: #ffffff;
	}
	.img-video {
		color: #333333;
		font-size: 30upx;
		font-weight: bold;
		padding: 20upx 0;
	}
	.users-message {
		display: flex;
		justify-content: space-between;
		height: 50upx;
		align-items: center;
		margin-bottom: 15upx;
	}
	.message-time {
		font-size: 25upx;
		color: #a8a8a8;
	}
	.cont-name image {
		width: 50upx !important;
		height: 50upx !important;
		border-radius: 50%;
		margin-right: 9upx;
	}
	.cont-name text {
		font-size: 30upx;
		color: #a8a8a8;
	}
	.cont-name {
		display: flex;
		align-items: center;
		height: 50upx;
	}
	/* 分类 */
	.cont-name-text text {
		font-size: 27upx;
		color: #333333;
		line-height: 1.5;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	.message-dist {
		margin-bottom: 30upx;
		border-bottom: 1rpx solid #f8f8f8;
		padding-bottom: 25upx;
	}
	.Comment-box{
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		background: #F1F1F1;
		z-index: 9999;
	}
	.Comment-text{background: #FFFFFF;padding-top: 70upx;}
	.Comment-text textarea{
		width: 100%;color: #808080 !important;
		font-size: 30upx;padding: 8upx;
	}
	.published{
		display: flex;justify-content: space-around;margin-top: 20upx;
	}
	.published view{
		font-size: 35upx;background: #00aaff;width: 200upx;text-align: center;padding: 10upx 0;border-radius: 10upx;
	}
	.menu-block{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
	}
	.menu-block view{
		background: #ffffff;
		border:1px solid #c2c5cc;
		border-radius: 6upx;
		font-size: 25upx;
		color: #292c33;
		font-weight: bold;
		text-align: center;
		padding: 15upx;
		margin: 15upx;
	}
	.evaluation{
		background: #f8f8f8;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 90upx;
		display: flex;
		align-items: center;
	}
	.evaluation input{
		font-size: 30upx;
		color: #9a9a9a;
		background: #f0f0f0;
		height: 70upx;
		width: 100%;
		border-radius: 50upx;
		margin: 0 30upx;
		padding-left: 10upx;
	}
	.activetext {
		color: #4cd964;
		background: #00aaff !important;
		border: 1px solid #00aaff !important;
	}
</style>
